<div class="toolbar-notification-container">
  <button mat-icon-button (click)="toggleDropdown()">
    <mat-icon *ngIf="!notifications.length">notifications_none</mat-icon>
    <mat-icon [matBadge]="notifications?.length" matBadgeColor="primay" *ngIf="notifications.length">notifications_none</mat-icon>
  </button>

  <div class="dropdown mat-elevation-z2" [class.open]="isOpen">
    <div class="card">
      <div class="card-header">
        <div class="title">
          <div>通知</div>
          <div class="card-extra">您有 {{ notifications?.length }} 条新的通知</div>
        </div>
        <button type="button" mat-icon-button>
          <mat-icon>settings</mat-icon>
        </button>
      </div>
      <div *ngIf="notifications.length !== 0; then thenBlock else elseBlock;"></div>
      <div class="card-footer">
        <div class="card-action">查看所以通知</div>
      </div>
    </div>
  </div>
</div>

<ng-template #thenBlock>
  <perfect-scrollbar class="card-content">
    <mat-nav-list>
      <ng-container *ngFor="let notification of notifications; last as isLast">
        <mat-list-item>
          <mat-icon class="notice-icon-notifications" matListIcon>notifications</mat-icon>
          <h3 matLine> {{ notification.title }}</h3>
          <p matLine> {{ notification.lastTime }} </p>
          <button mat-icon-button (click)="onDelete($event, notification)">
            <mat-icon class="notice-icon-close">close</mat-icon>
          </button>
        </mat-list-item>
        <mat-divider *ngIf="!isLast"></mat-divider>
      </ng-container>
    </mat-nav-list>
  </perfect-scrollbar>
</ng-template>

<ng-template #elseBlock>
  <div class="no">暂无通知</div>
</ng-template>